<script>
import { merge, pick, cloneDeep, map, includes } from 'lodash-es';
import { getToken } from '@/utils/auth';
import {
  provinceList,
  citysList,
  getInfo,
  addBuilding,
  getBranchType,
  editBuilding,
  getEditBuilding,
  deleteBuilding,
} from '@/api/index.js';
import ToolTip from '@/components/ToolTip/index.vue';
export default {
  components: { ToolTip },
  props: {
    data: { type: Array, default: () => [] },
    showFilter: { type: Boolean, default: false },
    defaultExpand: { type: Boolean, default: true },
    defaultCheckedKeys: { type: Array, default: () => [] },
  },
  data() {
    return {
      loading: false,
      defaultProps: {
        // 默认设置
        children: 'children',
        label: 'name',
      },
      currentData: '',
      currentNode: '',
      filterText: '',
      searchTree: [],
      searchList: [],
      searchLoading: false,
      visible: false,
    };
  },
  watch: {
    data: {
      handler(n) {
        let arr = cloneDeep(n);
        this.searchTree = this.flatten(arr);
      },
    },
  },
  mounted() {},
  methods: {
    flatten(tree, arr = []) {
      tree?.forEach(node => {
        arr.push(node);
        this.flatten(node.children, arr);
      });
      return arr;
    },
    handleNodeClick(data, node, e) {
      let parentNode = null;
      let enterpriseCode = null;
      if (node.level > 1) {
        // 获取顶级父节点
        parentNode = this.$refs.tree.getNode(node.parent);
        enterpriseCode = parentNode.data.id;
        if (parentNode.level > 1) {
          parentNode = this.$refs.tree.getNode(parentNode.parent);
          enterpriseCode = parentNode.data.id;
          if (parentNode.level > 1) {
            parentNode = this.$refs.tree.getNode(parentNode.parent);
            enterpriseCode = parentNode.data.id;
          }
        }
      }
      // 输出顶级父节点
      this.$emit('handleNodeClick', {
        enterpriseCode: !enterpriseCode ? data.id : enterpriseCode,
        buildingCode: node.level === 1 ? '' : data.id,
      });
    },
    filterNode(value, data) {
      console.log(value, data, 'value, data===');
      if (!value) return true;
      return data?.name?.indexOf(value) !== -1;
    },
    //搜索完后点击当前项checked显示高亮
    selectSearchItem(item) {
      if (item) {
        this.visible = false;
        this.filterText = item;
        console.log(this.$refs.tree, 'this.$refs.tree');
        this.$refs.tree.filter(item);
      }
    },
    handleFocus() {
      this.visible = this.filterText.length > 0 ? true : false;
    },
    changeInput(filterText) {
      if (this.filterText.length > 0) {
        this.searchLoading = true;
        this.searchList = [];
        map(this.searchTree, v => {
          includes(v.name, filterText) ? this.searchList.push(v.name) : null;
        });
        this.visible = true;
        this.searchLoading = false;
      } else {
        this.visible = false;
        this.$refs.tree.filter('');
      }
    },
    renderContent(h, { node, data, store }) {
      //每个父节点统计子节点数量方法
      if (data.children.length > 0) {
        return (
          // render-content采用jsx语法,需安装依赖转换js语法,
          //依赖1：npm install babel-plugin-transform-vue-jsx,
          //依赖2：npm install babel-helper-vue-jsx-merge-props,
          //依赖3：npm install babel-plugin-syntax-jsx
          <span class="custom-tree-node">
            <span>{node.label + data.viewId + '（' + data.children.length + '）'}</span>
          </span>
        );
      } else {
        return (
          <span class="custom-tree-node">
            <span>{node.label + '[' + data.viewId + ']'}</span>
          </span>
        );
      }
    },
    countNode(node) {
      let count = node.childNodes?.length ?? 0;
      node?.childNodes?.forEach(n => {
        count += this.countNode(n);
      });
      return count;
    },
  },
};
</script>
<template>
  <div class="et-box u-p20">
    <!-- <el-input
      class="u-mb20"
      prefix-icon="el-icon-search"
      size="small"
      v-if="showFilter"
      placeholder="查询"
      v-model="filterText"
    ></el-input> -->
    <el-popover placement="bottom" width="100%" trigger="manual" v-model="visible" popper-class="u-base-fg">
      <ul
        v-show="filterText.length > 0 && searchList.length !== 0"
        class="su-searchBox su-searchBox-light"
        v-loading="searchLoading"
      >
        <li v-for="item in searchList" :key="item" @click="selectSearchItem(item)">
          {{ item }}
        </li>
      </ul>
      <div v-show="searchList.length === 0" style="text-align: center; min-height: 100px">无数据</div>
      <el-input
        prefix-icon="el-icon-search"
        size="small"
        slot="reference"
        placeholder="查询"
        @input="changeInput(filterText)"
        @blur="visible = false"
        @focus="handleFocus"
        v-model="filterText"
        clearable
      ></el-input>
    </el-popover>
    <el-tree
      ref="tree"
      v-loading="loading"
      :data="data"
      node-key="id"
      :props="defaultProps"
      :default-expand-all="defaultExpand"
      :default-checked-keys="defaultCheckedKeys"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      :check-strictly="true"
      @node-click="handleNodeClick"
      :highlight-current="true"
    >
      <span class="custom-tree-node u-fs14" slot-scope="{ node, data }">
        <ToolTip class="tree-lable u-pr20" :content="data.name" effect="dark" />
        <!-- <span class="tree-lable u-pr20">{{ data.name }}</span> -->
        <span>{{ data.id }}--</span>
        <span>{{ countNode(node) > 0 ? countNode(node) : '' }}</span>
      </span>
    </el-tree>
  </div>
</template>
<style lang="scss" scoped>
.et-box {
  height: 100%;
  .el-tree {
    height: calc(100% - 52px);
    overflow-y: auto;
  }
  .custom-tree-node {
    // width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.editForm ::v-deep(.el-textarea__inner) {
  height: 120px;
  width: 750px;
}
.app-dark .editForm ::v-deep(.el-textarea__inner) {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid #262f48;
}
</style>
